<template>
  <div class="input-group mt-1 mb-1">
    <div class="input-group-prepend">
      <button type="button" class="btn btn-outline-secondary dropdown-toggle hLine btnMenu" data-toggle="dropdown">
        {{items[selIndex].name}}
      </button>
      <div class="dropdown-menu">
        <div v-for="(e, i) in items" class="dropdown-item" @click="selItem(i)" :key="i" :title="e.title ? e.title : ''" >
          {{e.name}}
        </div>
      </div>
    </div>
    <input type="text" class="form-control hLine" v-model="items[selIndex].value" :disabled="selIndex<2"
           :placeholder="selIndex===4 ? '%' : ''">
  </div>
</template>

<script>

const data = {
  'max': {'name': '最大值', 'value': 'dataMax'},
  'min': {'name': '最小值', 'value': 'dataMin'}
};

export default {
  name: 'UILimit',
  props: {
    'limit': {}, // min || max
    'value': {}
  },
  data () {
    var name = data[this.limit].name;
    return {
      selIndex: 0,
      result: null,
      items: [
        { name: '自动', value: 'null' },
        { name: name, value: data[this.limit].value },
        { name: '自定义值', value: '' },
        { name: name + '偏移(值)', value: '0', title: '基于' + name + ', 支持负数' },
        { name: name + '偏移(%)', value: '0', title: '基于' + name + ', 支持负数' }
      ]
    }
  },
  mounted: function () {
    this.resolve(this.value);
  },
  methods: {
    selItem: function (i) {
      this.selIndex = i;
      this.encode();
    },
    resolve: function (value) {
      // 解析配置项，仅支持本系统内置回调函数，使用传统function写法
      if (value === null || (value.toString().trim() in {'null': 1, '': 1})) {
        this.selIndex = 0;
      } else if ((typeof value) === 'function') {
        var f = value.toString(); // 函数全文
        var param = f.slice(f.indexOf('(') + 1, f.indexOf(')')).split(',')[0]; // 参数名
        var body = f.slice(f.indexOf('{') + 1, f.lastIndexOf("}")); // 函数体
        var rtn = body.slice(body.indexOf('return') + 7); // return语句
        var base = param + '.' + this.limit;
        var p = rtn.replaceAll(base, '').replace(/\+|\s+|;/g, '');
        if (rtn.indexOf('*') === -1) { // 偏移值
          this.selIndex = 3;
          this.items[this.selIndex].value = p;
        } else { // 偏移百分比
          this.selIndex = 4;
          this.items[this.selIndex].value = parseFloat(p.replace('*', '')) * 100;
        }
      } else if (value in {'dataMax': 1, 'dataMin': 1}) { // 最值
        this.selIndex = 1;
      } else if (!isNaN(value)) { // 指定值
        this.selIndex = 2;
        this.items[this.selIndex].value = parseFloat(value);
      } else { // 空
        this.selIndex = 0;
      }
    },
    encode: function () {
      var v = this.items[this.selIndex].value;
      // 转换成Echarts支持的配置项
      if (this.selIndex === 0) {
        this.result = null;
      } else if (this.selIndex < 3) {
        this.result = v;
      } else {
        var d = parseFloat(v);
        var funcs = {
          'min': [
            new Function('v', 'return v.min + ' + d + ';'),
            new Function('v', 'return v.min + v.min * ' + d / 100 + ';')
          ],
          'max': [
            new Function('v', 'return v.max + ' + d + ';'),
            new Function('v', 'return v.max + v.max * ' + d / 100 + ';')
          ]
        };
        this.result = funcs[this.limit][this.selIndex - 3];
      }
      // 通知父组件值已更改
      this.$emit('childChange', this.result);
    }
  },
  watch: {
    'items': {
      handler: function () {
        this.encode();
      },
      deep: true
    },
    'value': function () {
      this.resolve(this.value);
    }
  }
}

</script>

<style scoped>
  .hLine { height: 25px; line-height: 25px; font-size: 14px; padding-top:0px\0 }
  .btnMenu { padding-top: 0px; padding-bottom: 0px;  }
  div.dropdown-item { font-size: 14px }
</style>
